<template>
  <div class="app">
    <TopBack title="房间详情"></TopBack>
    <div class="top">
      <img :src="roomName.images" alt="" />
    </div>
    <div class="center">
      <p class="biaoti">{{ roomName.roomType }}</p>
      <van-row>
        <van-col span="12" class="iconAll">
          <img src="../../assets/image/serve/床.png"  alt="" />&nbsp;2张单人床1.2米</van-col
        >
        <van-col span="12" class="iconAll">
          <img src="../../assets/image/serve/房屋面积.png" alt="" /> &nbsp;
          {{ serveName.area }}</van-col
        >
      </van-row>
      <van-row>
        <van-col span="8" class="iconAll">
          <img
            src="../../assets/image/serve/wifi.png"
            alt=""
          />&nbsp;{{wifi}}免费</van-col
        >
        <van-col span="8" class="iconAll">
          <img src="../../assets/image/serve/人数.png" alt="" /> &nbsp;{{
            serveName.peopleNum
          }}人</van-col
        >
        <van-col span="8" class="iconAll">
          <img src="../../assets/image/serve/停车场.png" alt="" />
          &nbsp;{{park}}停车服务</van-col
        >
      </van-row>
      <van-row>
        <van-col span="8" class="iconAll">
          <img
            src="../../assets/image/serve/吸烟.png"
            alt=""
          />&nbsp;{{smoke}}吸烟</van-col
        >
        <van-col span="8" class="iconAll">
          <img src="../../assets/image/serve/早餐.png" alt="" />
          &nbsp;{{breakfast}}早餐</van-col
        >
        <van-col span="8" class="iconAll">
          <img src="../../assets/image/serve/空调.png" alt="" />
          &nbsp;{{air}}空调</van-col
        >
      </van-row>
      <van-row>
        <van-col span="8" class="iconAll">
          <img
            src="../../assets/image/serve/窗户.png"
            alt=""
          />&nbsp;{{whoAlone}}窗户</van-col
        >
      </van-row>
    
      <van-collapse v-model="activeNames" :accordion="true">
        <van-collapse-item title="更多房型设施" name="1">
            <van-row class="jianju">
        <van-col span="6" style="color:#8a8a8a ;font: normal 10px ">费用政策</van-col>
        <van-col span="18">加早：西式、中式早餐￥18.00<br/>
            加床:该房型不可加床<br/>
            停车场:有免费停车场
        </van-col>
      </van-row>
          <van-row class="jianju">
              <van-col span="6" class="jianjuyou">媒体科技</van-col>
              <van-col span="18">电话,液晶电视机,有线频道,智能门锁
              </van-col>
          </van-row>
          <van-row class="jianju">
              <van-col span="6" class="jianjuyou">便利设施</van-col>
              <van-col span="18">多种规格电源插座，110V电压插座, 220V电压插<br/>
                  座，遮光窗帘,书桌,坐卧两用长沙发，床具:毯子<br/>
                或被子，衣柜/衣橱，空调，房间内高速上网
              </van-col>
          </van-row>
          <van-row class="jianju">
              <van-col span="6" class="jianjuyou">浴室配套</van-col>
              <van-col span="18">独立卫生间，24小时热水,电热水器,独立淋浴<br/>
                间，吹风机，共用吹风机，拖鞋，浴巾，浴室化妆<br/>
                  放大镜，卫生纸
              </van-col>
          </van-row>
          <van-row class="jianju">
              <van-col span="6" class="jianjuyou">食品饮品.</van-col>
              <van-col span="18">瓶装水,电热水壶,茶包,饮水机
              </van-col>
          </van-row>
          <van-row class="jianju">
              <van-col span="6" class="jianjuyou">洗浴用品</van-col>
              <van-col span="18">牙刷，牙膏，洗发水，沐浴露，护发素,浴帽,香<br/>
                  皂,梳子，剃须刀,毛巾
              </van-col>
          </van-row>
          <van-row class="jianju">
              <van-col span="6" class="jianjuyou">其他设施</van-col>
              <van-col span="18">挂墙装饰画/字画，刷卡进门
              </van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="serve">
<p >服务优选</p>
<van-tag plain type="primary">预约发票</van-tag> &nbsp; 下单后可预约酒店开具发票,退房时直接在前台领取
    </div>
    <div class="footer">
        <p >费用明细</p>
        <div class="money">
            <van-divider content-position="right">每间每晚<span class="moneystyle">￥{{roomName.price}}</span></van-divider>
        </div>
        <hr>
        <div class="tiaozhuan">
            <van-row >
                <van-col span="12"></van-col>
                <van-col span="4">  <span class="moneystyle">￥{{roomName.price}}</span></van-col>
                <van-col span="8" class="anniu66">  <van-button round type="info" @click="toBook(serveName.hotelId,serveName.roomId)" color="#033E98">预定</van-button></van-col>
            </van-row>
          
           
        </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../../components/TopBack.vue";
import { getRoomType,changeRoom } from "../../api/roomApi.js";
import { getServeType } from "../../api/ServeApi.js";
import { Toast } from "vant";
export default {
  components: {
    TopBack,
  },
  data() {
    return {
      roomId: "",
      hotelId: "",
      room: [],
      roomName: [],
      serve: [],
      serveName: [],
      breakfast: '',
      park: '',
      wifi: '',
      air: '',
      smoke: '',
      whoAlone:"",
      activeNames: ['1'],
      serviceId:'',
      start:'',
               end:'',
               sum:'',
    };
  },
  created() {
    // console.log(this.$route.query);
    this.roomId = this.$route.query.roomId;
    this.hotelId = this.$route.query.hotelId;
    this. start=this.$route.query.start
this. end=this.$route.query.end
this. sum=this.$route.query.sum

  },
  mounted() {
    getServeType().then((res) => {
      // console.log(this.roomId,this.hotelId);
      this.serve = res.data;
      this.serve = this.serve.filter((item) => item.roomId == this.roomId);
      this.serveName = this.serve[0];
     
      if(this.serveName.breakfast=="0"){
          this.breakfast="有"
      }else{
          this.breakfast="没有" 
      }
      if(this.serveName.park=="0"){
          this.park="有"
      }else{
          this.park="没有" 
      }
       if(this.serveName.wifi=="0"){
          this.wifi="有"
      }else{
          this.wifi="没有" 
      }
       if(this.serveName.air=="0"){
          this.air="有"
      }else{
          this.air="没有" 
      }
       if(this.serveName.smoke=="0"){
          this.smoke="有"
      }else{
          this.smoke="没有" 
      }
       if(this.serveName.whoAlone=="0"){
          this.whoAlone="有"
      }else{
          this.whoAlone="没有" 
      }
    });
    getRoomType().then((res) => {
      this.room = res.data;
      this.room = this.room.filter((item) => item.roomId == this.roomId);
      this.roomName = this.room[0];
      // this.serviceId=this.roomName.serviceId
    });
  },
  methods: {
    toBook(hotelId,roomId){
        var thisRoom = this.room.filter((res) => res.roomId == roomId);
      var startime=this.start
      var endtime=this.end
      var startid=''
      var endid=''
      thisRoom[0].date.filter(
        function(res,index) {
         if( res.dataTime ==startime){
           startid=index
         }
        }
      );
     thisRoom[0].date.filter( function(res,index) {
         if( res.dataTime ==endtime){
           endid=index
         }         
        })
         for(var i=startid;i<=endid-1;i++){
       if(thisRoom[0].date[i].count<=0){
          Toast.fail('该房间已满')
          // console.log('对不起该时间段房间库存不足');
        }else{
          thisRoom[0].date[i].count--;
          console.log(thisRoom[0].date[i]);
          changeRoom({change:thisRoom}).then()
      this.$router.push({path:'/book',query:{hotelId,roomId,start:this.start,end:this.end,sum:this.sum}}); 
        }
         } 
    }
  },
};
</script>

<style lang="less" scoped>
.app{
    background-color: #EFEFEF;
}
.biaoti{
  font-size: 18px;
}
.top {
  width: 100%;
  img {
    width: 100%;
    height: 200px;
    margin-bottom: -20px;
  }
}
.center {
  padding-left: 3%;
  font-size: 12px;
  font-weight: bolder;
  background-color: #fff;
  
}
.iconAll img {
  width: 15px;
  height: 15px;
}
.iconAll * {
  display: inline-block;
  vertical-align: middle;
}
.van-row {
  margin: 5px 0;
}
.serve{
    margin-top: -10px;
    background-color: #fff;
    padding-left: 3%;
    font-size: 12px;
    padding-bottom: 10px;
    p{
      font-size:18px;font-weight: bolder; padding-top:10px ;margin-bottom:5px
    }
}
.footer{
      margin-top: -10px;
 background-color: #fff;
    padding-left: 3%;
     p{
      font-size:18px;font-weight: bolder; padding-top:10px ;margin-bottom:5px
    }
    hr{
       margin-top:30px
    }
    .van-row{
margin:0 3%
    }
    .anniu66{
      margin-top:-5px; margin-bottom:10px
    }
    
}
.money{
    background-color: #EFEFEF;
    margin: 10px 5px;
    border-radius: 10px;
}
.van-divider{
 font-size: 11px;
 color: #000;
}
.moneystyle{
    color: red;
    font-size: 16px;
}
.van-button--round{
    width: 120px;
    height: 30px;
}
.jianju{
  margin-top:10px;
  color: #000;
  .jianjuyou{
    color:#8a8a8a ;
    font-size: 14px;
  }
}

</style>
